<template>
  <!--访客数据展示-->
  <div class="contentRight" style="background-color: #f0f2f5;">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;">
      <!--第一排左侧-->
      <a-col flex="60%" style="background-color: #fff">
        <a-card size="small" title="访客预约实时数据" :bordered="false">
          <!--<a slot="extra" href="#">右上角</a>-->
          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <a-statistic
                  title="今日预约总人数"
                  :value="reservationsAllNumbers"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <a-statistic
                  title="今日到访总人数"
                  :value="visitorsAllNumbers"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <a-statistic
                  title="今日未审批人数"
                  :value="unapprovedAllNumbers"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>
            </a-col>
          </a-row>
        </a-card>

        <!--地图-->
        <div class="divbox">
          <div class="mapflex flex" style="">
            <div class="baseMapBg"></div>
            <!--<img src="http://dss.schaefflercn.com:9070/static/img/baseMap.jpg" style="height: 90%"/>-->
          </div>
        </div>
      </a-col>

      <a-col flex="10px"></a-col>
      <!--第一排右侧-->
      <a-col flex="auto" >
        <a-card size="small" title="安亭基地" :bordered="false" style="margin-bottom: 10px">
          <template slot="extra">
            <a-dropdown>
              <a  class="ant-dropdown-link menuA">
                {{antingAreaName}}<a-icon type="down" />
              </a>
              <a-menu slot="overlay" @click="handleClick">
                <a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">
                  {{item.areaName}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>

          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #F0F2F5;"></span>
                  <a-statistic
                    title="今日预约总人数"
                    :value="reservationsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #00FF00;"></span>
                  <a-statistic
                    title="今日到访总人数"
                    :value="visitorsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #FFA500;"></span>
                  <a-statistic
                    title="今日未审批人数"
                    :value="unapprovedNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
          </a-row>

          <div style="position: relative;min-height: 100px">
            <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex" v-if="antingData.length == 0">
              <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;" class="flex">此区域未查询到数据</div>
            </div>
            <!--图表-->
            <div v-else id="container" class="charthuan"></div>
          </div>

        </a-card>

        <a-card size="small" title="银川基地" :bordered="false">
          <template slot="extra">
            <a-dropdown>
              <a  class="ant-dropdown-link menuA">
                {{yinchuanAreaName2}}<a-icon type="down" />
              </a>
              <a-menu slot="overlay" @click="handleClickYinchuan2">
                <a-menu-item class="menuA" v-for="item in yinchuanAreaList" :key="item.id" :value="item.areaName">
                  {{item.areaName}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>

          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #F0F2F5;"></span>
                  <a-statistic
                    title="今日预约总人数"
                    :value="ycreservationsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #00FF00;"></span>
                  <a-statistic
                    title="今日到访总人数"
                    :value="ycvisitorsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #FFA500;"></span>
                  <a-statistic
                    title="今日未审批人数"
                    :value="ycunapprovedNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
          </a-row>

          <div style="position: relative;min-height: 100px">
            <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex" v-if="yinchuanData.length == 0">
              <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;" class="flex">此区域未查询到数据</div>
            </div>
            <!--图表-->
            <div v-else id="containerYinchuan2" class="charthuan"></div>
          </div>
        </a-card>

      </a-col>
    </a-row>

    <!--第二排-->
    <a-row type="flex" class="marginBottom" style="width: 100%">
      <a-col flex="50%" style="background-color: aqua">
        <a-card size="small" title="太仓基地" :bordered="false">
          <div class="areaNotOpened">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
      <a-col flex="10px"></a-col>
      <a-col flex="auto" style="background-color: blueviolet">
        <a-card size="small" title="湘潭基地" :bordered="false">
          <div class="areaNotOpened">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import reservationApi from "@/api/reservation";
import { Chart, registerShape } from '@antv/g2';

export default {
  components: {

  },
  name:'',
  data() {
    return {
      loading1: false,
      aningAreaAll:[],
      antingChart: null,  //安亭数据图形对象
      antingAreaName:"办公区域",
      antingAreaId: "1",
      unapprovedNumbers: 0 , //安亭未审批人数
      visitorsNumbers: 0 , //安亭到访总人数
      reservationsNumbers: 0 , //安亭预约总人数

      reservationsAllNumbers: 0 , //所有基地预约总人数
      visitorsAllNumbers: 0 , //所有基地到访总人数
      unapprovedAllNumbers: 0 , //所有基地未审批人数

      intervalId:null,   //定时器，定时刷新页面
      antingData: [],

      // 银川基地
      ycunapprovedNumbers: 0 , //安亭未审批人数
      ycvisitorsNumbers: 0 , //安亭到访总人数
      ycreservationsNumbers: 0 , //安亭预约总人数
      yinchuanData: [],
      yinchuanAreaList:[],
      yinchuanAreaName2: "",
      yinchuanAreaId2: "",
      yinchanChart: null,  //银川数据图形对象
    }
  },
  beforeMount(){
      // this.aningAreaAll = reservationApi.getAningAreaAll();
      // console.log(this.aningAreaAll);
      this.getAntingAreaList();
    this.getYinchuanAreaList();
  },
  created(){
    this.dataRefreh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  mounted() {
    this.fristAntingData();
  },
  methods: {
    // 获取基地的区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      // console.log(res.data);
      if (res.data.success){
        this.aningAreaAll = res.data.result;
        // console.log(this.aningAreaAll);
      } else {
        this.$message.error(res.data.message);
      }

    },
    // 获取银川基地的区域
    async getYinchuanAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
      // console.log(res.data);
      if (res.data.success){
        this.yinchuanAreaList = res.data.result;
        this.yinchuanAreaName2 = res.data.result[0].areaName;
        this.yinchuanAreaId2 = res.data.result[0].id;
        // console.log(this.yinchuanAreaList);
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.getAllVisitCase(); //加载数据函数
        this.loadDataRegularly();
      }, 20000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    async fristAntingData(){
      this.getAllVisitCase();
      await this.getAntingVisitCase();
      await this.getYinchuanVisitCase();
      if (this.antingData.length != 0){
        this.pieChart1()
      }
      if (this.yinchuanData.length != 0){
        this.pieChartYinchuan()
      }

    },
    // 安亭基地切换区域
    async handleClick(e) {
      // console.log(e)
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      await this.getAntingVisitCase();
      // console.log(this.antingData);
      if (this.antingData.length != 0){
        this.antingChart.data(this.antingData);
        this.antingChart.render();
      }
    },
    // 银川基地切换区域
    async handleClickYinchuan2(e) {
      // console.log(e);
      this.yinchuanAreaName2 = e.item.value;
      this.yinchuanAreaId2 = e.key;
      await this.getYinchuanVisitCase();
      if (this.yinchuanData.length != 0){
        this.yinchanChart.data(this.yinchuanData);
        this.yinchanChart.render();
      }
    },
    // 定时加载数据
    async loadDataRegularly() {
      await this.getAntingVisitCase();
      await this.getYinchuanVisitCase();
      // console.log(this.antingData);
      if (this.antingData.length != 0){
        this.antingChart.data(this.antingData);
        this.antingChart.render();
      }
      if (this.yinchuanData.length != 0){
        this.yinchanChart.data(this.yinchuanData);
        this.yinchanChart.render();
      }

    },
    // 请求安亭基地数据
    async getAntingVisitCase() {
      // this.loading = true;
      // console.log(this.antingAreaId);
      let params = {
        visitBaseId : 100,
        visitAreaId: this.antingAreaId
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.antingData = [];
        let respData = resp.data.result;
        if (respData.length != 0){
          let dataarr = respData.filter(el=>{
            return el.population > 0
          });
          // console.log(dataarr);
          if (dataarr.length == 0){
            this.antingData = [];
            this.unapprovedNumbers = 0 ; //未审批人数
            this.visitorsNumbers = 0 ; //到访总人数
            this.reservationsNumbers = 0 ; //预约总人数
          } else {
            respData.forEach( el =>{
              if (el.visitorState == "今日预约总人数"){
                this.reservationsNumbers = el.population ; //预约总人数
                this.antingData[0] = {
                  type: '今日预约总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日到访总人数"){
                this.visitorsNumbers = el.population ; //今日到访总人数
                this.antingData[1] = {
                  type: '今日到访总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日未审批人数"){
                this.unapprovedNumbers = el.population ; //今日未审批人数
                this.antingData[2] = {
                  type: '今日未审批人数',
                  value: el.population
                };
              }
            });
          }
          // console.log(this.antingData);
        }

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求银川基地数据
    async getYinchuanVisitCase() {
      let params = {
        visitBaseId : 102,
        visitAreaId: this.yinchuanAreaId2
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.yinchuanData = [];
        let respData = resp.data.result;
        if (respData.length != 0){
          let dataarr = respData.filter(el=>{
            return el.population > 0
          });
          // console.log(dataarr);
          if (dataarr.length == 0){
            this.yinchuanData = [];
            this.ycunapprovedNumbers = 0 ; //未审批人数
            this.ycvisitorsNumbers = 0 ; //到访总人数
            this.ycreservationsNumbers = 0 ; //预约总人数
          } else {
            respData.forEach( el =>{
              if (el.visitorState == "今日预约总人数"){
                this.ycreservationsNumbers = el.population ; //预约总人数
                this.yinchuanData[0] = {
                  type: '今日预约总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日到访总人数"){
                this.ycvisitorsNumbers = el.population ; //今日到访总人数
                this.yinchuanData[1] = {
                  type: '今日到访总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日未审批人数"){
                this.ycunapprovedNumbers = el.population ; //今日未审批人数
                this.yinchuanData[2] = {
                  type: '今日未审批人数',
                  value: el.population
                };
              }
            });
          }
          // console.log(this.antingData);
        }

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求所有基地数据
    async getAllVisitCase() {
      // this.loading = true;
      let params = {
        visitBaseId : "",
        visitAreaId: ""
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        let respData = resp.data.result;
        respData.forEach( el => {
          if (el.visitorState == "今日预约总人数") {
            this.reservationsAllNumbers = el.population; //今日预约总人数
          } else if (el.visitorState == "今日到访总人数") {
            this.visitorsAllNumbers = el.population; //今日到访总人数
          } else if (el.visitorState == "今日未审批人数") {
            this.unapprovedAllNumbers = el.population; //今日未审批人数
          }
        });

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 安亭访客数据饼图
    pieChart1() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500,
      });
      this.antingChart = chart;
      chart.data(this.antingData);
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8,
      });
      chart.tooltip(false);
      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type',['#F0F2F5','#00FF00', '#FFA500', '#FF0000'])
        .shape('slice-shape');

      chart.render();
    },
    // 银川访客数据饼图
    pieChartYinchuan() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'containerYinchuan2',
        autoFit: true,
        height: 500,
      });
      this.yinchanChart = chart;
      chart.data(this.yinchuanData);
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8,
      });
      chart.tooltip(false);
      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type',['#F0F2F5','#00FF00', '#FFA500', '#FF0000'])
        .shape('slice-shape');

      chart.render();
    },




  },
}
</script>
